<script lang="ts" setup>
import { ref } from "vue"

const processList = ref<any>([{
  datetime: "09:30-12:00",
  action: `1、检查是否有带齐所需物料（学生名单、教务手机等）
2、做活动链接
3、建立话术群
4、把链接发话术群给老师们做细节检查、确认链接细节，看是否有需改动
(活动价格、年龄段、科目顺序、课时、期限、课程消耗安排、规则、图片）`,
  script: "-",
  note: "-"
}, {
  datetime: "14:00-15:30",
  action: "跟机构沟通、强调规则、列出规则",
  script: "列出规则",
  note: `活动规则必须要说明，尤其退费规则、新老生费用规则，可以的话列黑板上重点确认一遍

沟通是否能接受新生团长（新生团长拼成6人免单费用由机构自己退），告知新生不能开团情况下活动的效果，引导机构同意`
}, {
  datetime: "15:30-18:00",
  action: `1、所有老师加招生老师好友，并把招生老师设为星标好友

2、检查核对老生名单，查看老师教务手机微信通讯录

3、从通讯录计算出所需群数，引导老师拉群（从a拉到z，所有跟机构相关的人都拉群）`,
  script: "-",
  note: `1、每群35人（老师＋招生老师＋学生家长33人），建到哪需要注意记录一下，避免重复或漏拉

2、建群中有可能会出现弹出是否通知好友，点击取消

3、建好群不得在群内发送任何消息，将群设为置顶，方便找到。

4、所有群建好后依次修改群名，如：1.XX团购福利群

5、检查老师在本群昵称是否为：xxx教务老师xxx老师`
}])

const employeeList = ref<any>([{
  name: "凡老师",
  visiter: "10",
  payment: "8",
  bag: "0",
  type: "新0老0",
}, {
  name: "凡老师",
  visiter: "10",
  payment: "8",
  bag: "0",
  type: "新0老0",
}, {
  name: "凡老师",
  visiter: "10",
  payment: "8",
  bag: "0",
  type: "新0老0",
}, {
  name: "凡老师",
  visiter: "10",
  payment: "8",
  bag: "0",
  type: "新0老0",
}])

const dataList = ref<any>([{
  name: "凡老师",
  datetime: "18:50:04",
  inviter: "丹丹",
  employee: "王大锤"
}, {
  name: "凡老师",
  datetime: "18:50:04",
  inviter: "丹丹",
  employee: "王大锤"
},
{
  name: "凡老师",
  datetime: "18:50:04",
  inviter: "丹丹",
  employee: "王大锤"
},
{
  name: "凡老师",
  datetime: "18:50:04",
  inviter: "丹丹",
  employee: "王大锤"
},
{
  name: "凡老师",
  datetime: "18:50:04",
  inviter: "丹丹",
  employee: "王大锤"
},
{
  name: "凡老师",
  datetime: "18:50:04",
  inviter: "丹丹",
  employee: "王大锤"
}])
</script>

<template>
  <umrp-container padding="16px">
    <umrp-container padding="0 0 16px 0">
      <umrp-row>
        <umrp-col :span="6">
          <umrp-text bold size="24">营销活动就用小蓝叮咚</umrp-text>
        </umrp-col>
        <umrp-col :span="12">
          <umrp-container align="center">
            <umrp-text bold size="24">贝之幸艺术·广州教培小蓝卡·618限时198抢购5重豪礼</umrp-text>
          </umrp-container>
        </umrp-col>
        <umrp-col :span="6"></umrp-col>
      </umrp-row>
    </umrp-container>
    <umrp-row :gutter="10">
      <umrp-col :span="6">
        <umrp-container :gap="10" height="calc(100vh - 114px)">
          <umrp-container :gap="24" padding="16px" bg-color="#f2f2f2" height="33.333%">
            <umrp-space :size="16" align="center">
              <umrp-text>浏览次数</umrp-text>
              <umrp-container bg-color="#333" height="20px" :width="200"></umrp-container>
              <umrp-text>2664次</umrp-text>
            </umrp-space>
            <umrp-space :size="16" align="center">
              <umrp-text>浏览人数</umrp-text>
              <umrp-container bg-color="#333" height="20px" :width="200"></umrp-container>
              <umrp-text>2664人</umrp-text>
            </umrp-space>
            <umrp-space :size="16" align="center">
              <umrp-text>分享次数</umrp-text>
              <umrp-container bg-color="#333" height="20px" :width="200"></umrp-container>
              <umrp-text>2664次</umrp-text>
            </umrp-space>
            <umrp-space :size="16" align="center">
              <umrp-text>报名次数</umrp-text>
              <umrp-container bg-color="#333" height="20px" :width="200"></umrp-container>
              <umrp-text>2664次</umrp-text>
            </umrp-space>
            <umrp-space :size="16" align="center">
              <umrp-text>新生1000</umrp-text>
              <umrp-container bg-color="#333" height="20px" :width="200"></umrp-container>
              <umrp-text>老生1000</umrp-text>
            </umrp-space>
          </umrp-container>
          <umrp-container padding="16px" bg-color="#f2f2f2" height="33.333%">
            <umrp-container align="center">
              <umrp-text bold size="18">画像分析</umrp-text>
            </umrp-container>
          </umrp-container>
          <umrp-container padding="16px" bg-color="#f2f2f2" height="33.333%">
            <umrp-container align="center">
              <umrp-text bold size="18">AI分析</umrp-text>
            </umrp-container>
          </umrp-container>
        </umrp-container>
      </umrp-col>
      <umrp-col :span="12">
        <umrp-tabs default-active-tab="1">
          <umrp-tab-panel key="1" title="活动">
            <umrp-container :gap="10">
              <umrp-container align="center">
                <umrp-text bold :size="32">已报名</umrp-text>
              </umrp-container>
              <umrp-container direction="horizonal" :gap="20" padding="32px 0" justify="center">
                <umrp-container padding="32px" bg-color="#f2f2f2">
                  <umrp-text bold size="50">1</umrp-text>
                </umrp-container>
                <umrp-container padding="32px" bg-color="#f2f2f2">
                  <umrp-text bold size="50">3</umrp-text>
                </umrp-container>
                <umrp-container padding="32px" bg-color="#f2f2f2">
                  <umrp-text bold size="50">5</umrp-text>
                </umrp-container>
              </umrp-container>
              <umrp-container padding="0 16px" bg-color="#f2f2f2" height="300px">
                <umrp-table :data="dataList" :pagination="false">
                  <template #columns>
                    <umrp-table-column title="报名人" data-index="name"></umrp-table-column>
                    <umrp-table-column title="报名时间" data-index="datetime"></umrp-table-column>
                    <umrp-table-column title="邀请人" data-index="inviter"></umrp-table-column>
                    <umrp-table-column title="邀请员工" data-index="employee"></umrp-table-column>
                  </template>
                </umrp-table>
              </umrp-container>
              <umrp-container bg-color="#f2f2f2" height="240px">
                <umrp-container>
                  <umrp-text>明星员工榜</umrp-text>
                </umrp-container>
              </umrp-container>
            </umrp-container>
          </umrp-tab-panel>
          <umrp-tab-panel key="2" title="流程">
            <umrp-container padding="32px 0">
              <umrp-table :data="processList" :pagination="false">
                <template #columns>
                  <umrp-table-column title="时间" data-index="datetime" :width="100"></umrp-table-column>
                  <umrp-table-column title="操作流程" data-index="action" :width="250"></umrp-table-column>
                  <umrp-table-column title="话术" data-index="script"></umrp-table-column>
                  <umrp-table-column title="备注" data-index="note" :width="200"></umrp-table-column>
                </template>
              </umrp-table>
            </umrp-container>
          </umrp-tab-panel>
        </umrp-tabs>
      </umrp-col>
      <umrp-col :span="6">
        <umrp-container :gap="10" height="calc(100vh - 114px)">
          <umrp-container padding="0 10px" bg-color="#f2f2f2" height="33.333%">
            <umrp-container padding="16px 0" align="center">
              <umrp-text bold :size="18">员工排名（共36人）</umrp-text>
            </umrp-container>
            <umrp-table :data="employeeList" :pagination="false" style="font-size:11px">
              <template #columns>
                <umrp-table-column title="排名" data-index="id"></umrp-table-column>
                <umrp-table-column title="报名人" data-index="name"></umrp-table-column>
                <umrp-table-column title="带来访问人数" data-index="visiter"></umrp-table-column>
                <umrp-table-column title="带来报名" data-index="payment"></umrp-table-column>
                <umrp-table-column title="红包奖励" data-index="bag"></umrp-table-column>
                <umrp-table-column title="新老客" data-index="type"></umrp-table-column>
              </template>
            </umrp-table>
          </umrp-container>
          <umrp-container padding="0 10px" bg-color="#f2f2f2" height="33.333%">
            <umrp-container padding="16px 0" align="center">
              <umrp-text bold :size="18">分享排行榜</umrp-text>
            </umrp-container>
            <umrp-table :data="employeeList" :pagination="false" style="font-size:14px">
              <template #columns>
                <umrp-table-column title="排名" data-index="id"></umrp-table-column>
                <umrp-table-column title="分享人" data-index="name"></umrp-table-column>
                <umrp-table-column title="分享次数" data-index="visiter"></umrp-table-column>
              </template>
            </umrp-table>
          </umrp-container>
          <umrp-container :gap="24" padding="16px" bg-color="#f2f2f2" height="33.333%">
            <umrp-row>
              <umrp-col :span="8">活动步骤</umrp-col>
              <umrp-col>操作概述</umrp-col>
            </umrp-row>
            <umrp-row>
              <umrp-col :span="8">09:30-12:00</umrp-col>
              <umrp-col>备物料/建群/审链接</umrp-col>
            </umrp-row>
            <umrp-row>
              <umrp-col :span="8">
                <umrp-text color="red" :size="18">14:00-15:30</umrp-text>
              </umrp-col>
              <umrp-col>
                <umrp-text color="red" :size="18">跟机构沟通/强调规则/列出规则</umrp-text>
              </umrp-col>
            </umrp-row>
            <umrp-row>
              <umrp-col :span="8">15:30-18:00</umrp-col>
              <umrp-col>加好友/核名单/拉群</umrp-col>
            </umrp-row>
          </umrp-container>
        </umrp-container>
      </umrp-col>
    </umrp-row>
  </umrp-container>
</template>